#tioBar {
  background: rgba(255, 255, 255, 0.15);
  //   position: relative;

  > p {
    display: flex;
    justify-content: left;
    // 发光圆圈 border
    > div#circle {
      border: 2px solid #39efff30;
      border-radius: 50%;

      animation-name: circleAnimation;
      animation-duration: 2s;
      animation-fill-mode: forwards;
      // 实心圆点
      > i {
        display: block;
        margin: 10px;
        width: 12px;
        height: 12px;
        background: #39efff;
        border-radius: 50%;
      }

      // 文字
      > span {
        position: relative;
        top: -10px;
        left: -6px;
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #39efff;
        line-height: 20px;

        animation-name: circleAnimation;
        animation-duration: 2s;
        animation-fill-mode: forwards;
      }
    }

    main {
      height: 100%;
      width: 100%;
      animation-name: example;
      animation-duration: 2s;
      animation-fill-mode: forwards;
    }
  }
  @keyframes example {
    from {
      width: 0px;
    }
    to {
      width: 100%;
    }
  }

  @keyframes circleAnimation {
    from {
      left: 0px;
    }
    to {
      left: calc(100% - 16px); // 待完善 需要取到高度变量 https://www.jianshu.com/p/b7b347c9783e
    }
  }
}
